/**
 * @Author: jipeng.Li
 * @Date: 2021-04-25 09:53:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-25 09:53:21
 * @Description: 维修卡列表
 */
import React, { Component } from 'react';
import { SafeAreaView, StyleSheet, TouchableOpacity, } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { px2dp } from '@/styles';
import { cache, msg } from '@/common';
import { empty08 } from '@/images';
import repair from '@/api/repair';
import XmList from '../../components/XmList';
import EmptyPage from '../../components/EmptyPage';
import RepairCard from './components/repair-card';

export default class WlRepair extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: {},
      pageNo: 1,
      pageSize: 15,
      isLoading: false,
      showFoot: 1, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
      wlRepairList: [],
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    AsyncStorage.getItem(cache.USER_INFO).then(info => {
      const rawData = JSON.parse(info);
      this.setState({ userInfo: rawData }, () => {
        this.loadData();
      });
    });
  }

  componentWillUnmount() {

  }

  render() {
    const { wlRepairList, showFoot, isLoading } = this.state;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <XmList
          sources={wlRepairList}
          renderItem={this._renderItem}
          style={styles.xmListContainer}
          isLoading={isLoading}
          onDropdownRefresh={this.loadData}
          onPullUpMore={this.LoadMore}
          singleKey={item => `wlRepairList${item.id}`}
          showFoot={showFoot}
          customEmptyView={<EmptyPage emptyIcon={empty08} noText='您暂时还没有修理卡哦~' />}
        />
      </SafeAreaView>
    );
  }

  _renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={styles.cardContainer}
        onPress={() => {
          msg.emit('router: goToNext', {
            routeName: 'WlRepairCardDetails',
            cardData: item,
          });
        }}
      >
        <RepairCard
          disable={this.cardIsDisable(item)}
          companyType={item.carOwnerName}
          companyName={item.carOwnerMobile}
          balance={item.nowAmount || item.total}
        />
      </TouchableOpacity>
    );
  }

  // 下拉刷新
  loadData = () => {
    this.setState({
      isLoading: true,
      pageNo: 1,
      wlRepairList: [],
      showFoot: 0
    }, () => {
      this.pageOilEmpower('dropdown');
    });
  }

  // 上拉加载更多
  LoadMore = () => {
    this.setState({ showFoot: 2 }, () => this.pageOilEmpower('pullMore'));
  }

  getUserInfo = () => {
    AsyncStorage.getItem(cache.USER_INFO).then(info => {
      let userInfo = JSON.parse(info);
      this.setState({ userInfo });
    });
  }

  cardIsDisable = ({ status, type, empowerStatus }) => {
    let isDisable = false;
    if (type === 2 && (empowerStatus === 'N' || status === 'N')) {
      isDisable = true;
    }
    return isDisable;
  }

  /**
   * 接口
   */
  pageOilEmpower = (type) => {
    const { pageNo, pageSize, wlRepairList, userInfo } = this.state;
    const { custId } = userInfo;
    let newWlRepairList = [];
    repair.pageOilEmpower({
      pageNo: pageNo,
      pageSize: pageSize,
      custId
    }).then(res => {
      if (res.success) {
        const { records, pages } = res.data;
        if (type === 'dropdown') {
          this.setState({ wlRepairList: records });
        }
        if (type === 'pullMore') {
          if (pageNo > pages) {
            this.setState({ showFoot: 1 });
            return;
          }
          newWlRepairList = [...wlRepairList, ...records];
          this.setState({ wlRepairList: newWlRepairList });
        }
        this.setState({ isLoading: false, pageNo: pageNo + 1 });
      } else {
        this.setState({ isLoading: false, wlRepairList: [] });
      }
    });
  }
}

const styles = StyleSheet.create({
  xmListContainer: {},
  cardContainer: {
    flex: 1,
    alignItems: 'center',
    marginBottom: px2dp(20)
  }
});
